<template>
  <div class="addNewSpecCard">
    <div class="paddingBox">
      <specCard
        :options="formData"
        @add="addSpec"
        @edit="editSpec"
        @delete-child="deleteSpecChild"
      ></specCard>
    </div>

    <myDialog
      ref="editSpecNameRef"
      @cancel="cancelEditName"
      @confirm="handleEditConfirm"
    >
      <template #title>
        <p class="dialogTitle">修改规格名称</p>
      </template>
      <div class="dialogCenter jscenter">
        <nut-input
          label="规格名称"
          type="text"
          placeholder="请输入规格名称"
          v-model="formData.tempModel"
          max-length="10"
        />
      </div>
      <template #confirm> 保存 </template>
    </myDialog>

    <myDialog
      ref="addSpecTypeRef"
      @cancel="cancelEditName"
      @confirm="addSpecType"
    >
      <template #title>
        <p class="dialogTitle">添加具体规格</p>
      </template>
      <div class="dialogCenter jscenter">
        <nut-input
          style="padding: 0"
          label="具体规格"
          type="text"
          placeholder="请输入具体规格名称"
          v-model="tempSpecName"
          max-length="10"
        />
      </div>
      <template #confirm> 保存 </template>
    </myDialog>

    <fullFoot :title="'完成'" @click-btn="finished"></fullFoot>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import specCard from "./components/specCard.vue";
import fullFoot from "../home/groupLink/components/fullFoot.vue";
import myDialog from "@/components/Dialog/index.vue";
import { useRouter, useRoute } from "vue-router";
import { nanoid } from "nanoid";
import { Toast } from "@nutui/nutui";
import { addSpecApi, modifySpecApi } from "@/api/addstart/index";
let formData: any = ref({
  name: "",
  isNew: true,
  specs: [],
  tempModel: "",
});

const router = useRouter();
const route = useRoute();

const addSpec = () => {
  addSpecTypeRefDialog();
};

const editSpec = () => {
  editSpecNameRefDialog();
};

const deleteSpecChild = (card: any, type: any) => {
  formData.value.specs = formData.value.specs.filter(
    (item: any) => item.nId != type.nId
  );
};

//--------------------------------------------添加修改规格完成--------------------------------------------
const finished = () => {
  if (!formData.value.name || formData.value.specs.length <= 0) {
    Toast.text("规格名称或具体规格不能为空");
    return;
  }

  if (route.query.specId) {
    modifySpecRequest();
  } else {
    addSpecRequest();
  }
};

//--------------------------------------------修改规格名称弹窗--------------------------------------------
const editSpecNameRef = ref<InstanceType<typeof myDialog>>();
const editSpecNameRefDialog = () => {
  editSpecNameRef.value?.openDialog();
};
const cancelEditName = () => {
  formData.value.tempModel = "";
  tempSpecName.value = "";
};
const handleEditConfirm = () => {
  formData.value.name = formData.value.tempModel;
  formData.value.tempModel = "";
};

//--------------------------------------------添加具体规格名称弹窗--------------------------------------------
const addSpecTypeRef = ref<InstanceType<typeof myDialog>>();
let tempSpecName: any = ref();
const addSpecTypeRefDialog = () => {
  addSpecTypeRef.value?.openDialog();
};
const addSpecType = () => {
  if (tempSpecName.value) {
    formData.value.specs.push({
      nId: nanoid(),
      spec_name: tempSpecName.value,
      spec_value: tempSpecName.value,
    });
    tempSpecName.value = "";
  }
};

//--------------------------------------------网络请求--------------------------------------------
// 新增
async function addSpecRequest() {
  // 接口要求 string: [string] 格式
  const res = await addSpecApi({
    [`${String(formData.value.name)}`]: formData.value.specs.map(
      (item: any) => item.spec_value
    ),
  });
  if (res.code == 0) {
    Toast.text("添加成功");
  }

  // router.push('/spec/specManage')
  router.back();
}
// 修改
async function modifySpecRequest() {
  const res = await modifySpecApi({
    spec_name: route.query.specPreName,
    new_specs: {
      [`${String(formData.value.name)}`]: formData.value.specs.map(
        (item: any) => item.spec_value
      ),
    },
  });
  if (res.code == 0) {
    Toast.text("修改成功");
  }
  router.back();
}

//--------------------------------------------生命周期函数--------------------------------------------
// 初始化函数
function setupInit() {
  if (route.query.specId) {
    const localSpecItem = window.localStorage.getItem("specItem");
    if (localSpecItem) {
      const specItem = JSON.parse(localSpecItem);
      formData.value.name = specItem.name;
      formData.value.specs = specItem.specs;
    }
  } else {
    window.localStorage.removeItem("specItem");
  }
}
setupInit();
</script>

<style lang="scss" scoped>
.addNewSpecCard {
  input {
    margin-left: 44px;
    margin-right: auto;
    width: 308px;
    height: 42px;
    line-height: 42px;
    background: none;
    outline: none;
    border: none;
    color: #000000;
    font-size: 28px;
  }
  .paddingBox {
    padding: 20px 30px;
  }
  .dialogTitle {
    font-weight: 500;
    color: #000000;
    font-size: 36px;
    margin-top: 36px;
  }
  .dialogCenter {
    padding-bottom: 30px;
    margin: 59px 30px 63px 50px;
    // border-bottom: 1px solid #eeeeee;
    p {
      color: #000000;
      font-size: 30px;
      word-break: keep-all;
    }
  }
}
</style>
